<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--<p>dddd</p>-->
<div id="viewUser">
    <template class="data">
            <el-input
                    style="width:30%;margin-bottom: 10px;color: blue"
                    placeholder="请输入搜索内容"
                    v-model="query"
                    @change="search"
                    clearable>
            </el-input>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="userid"
                        label="用户ID"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="personid"
                        label="身份证号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="真实姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="grade"
                        label="年级"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话"
                        width="120">
                </el-table-column>
                <el-table-column label="操作" width="180" >
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="update(scope.row.id)" ></el-button>
                        <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="deleteUser(scope.row.id)" ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    :current-page="current"
                    :page-size="limit"
                    :total="total"
                    style="padding:30px 0; margin-top:20px; text-align: center;"
                    layout="prev, pager, next"
                    @current-change="getUserList"></el-pagination>
    </template>
</div>

<script src="../../js/vue.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script  >

    new Vue({
        el:'#viewUser',
        data : function (){
            return{
                tableData: [],  //表格中的所有数据
                current:0,      //当前页码
                limit:3,        //每页展示记录数
                total:0,        //总记录数
                query:''        //查询条件
            }
        },
        created(){
            this.getUserList()
        },
        methods: {
            search(){
                this.getUserList()
            },
            getUserList(page=1){
                this.current = page
                axios.get('/viewUser?current='+this.current+'&query='+this.query)
                    .then(response=>{
                        console.log(response)
                        this.tableData = response.data.data.pageInfo.list
                        this.current = response.data.data.pageInfo.pageNum
                        this.total = response.data.data.pageInfo.total
                        this.query = response.data.data.query
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            deleteUser(id){
                axios.delete(`delete/${id}`)
                    .then(response=>{
                        let code = response.data.code
                        let msg = response.data.msg
                        if(code===200){
                            this.$message({showClose: true,message: msg,type: 'success'});
                            //跳转查询用户列表组件
                            this.getUserList()
                        }else{
                            this.$message({showClose: true,message: msg,type: 'error'});
                        }
                    })
            },
        }
    })
</script>
</body>
</html>